<template>
	<div class="main-box">
	
		<div class="order-card">
			<el-row :gutter="20">
				<el-col :span="6">
					<div class=" bg-purple">
						<img src="../../assets/images/home_order.png" alt="">
						<div>
							<p>今日订单总数</p>
							<p>200</p>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class=" bg-purple">
						<img src="../../assets/images/home_order.png" alt="">
						<div>
							<p>今日订单总数</p>
							<p>200</p>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class=" bg-purple">
						<img src="../../assets/images/home_order.png" alt="">
						<div>
							<p>今日订单总数</p>
							<p>200</p>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class=" bg-purple">
						<img src="../../assets/images/home_order.png" alt="">
						<div>
							<p>今日订单总数</p>
							<p>200</p>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>

		<div class="pending-box">
			<h3>待处理事务</h3>
			<div class="pending-item">
				<el-row :gutter="20" v-for="(i,index) in 3" :key="index">
					<el-col :span="8" v-for="(k,index2) in 3" :key="index2">
						<div class="item">
							<div>待付款订单</div>
							<div>(10)</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>

		<!-- 订单统计 -->
		<div class="pending-box">
			<h3>订单统计</h3>
			<el-row class="pending-item order-pd">
				<el-col :span="4" class="order-desc">
					<div class="order-desc-item" v-for="(i,index) in TongjiArr" :key="index">
						<p>{{i.name}}</p>
						<p>{{i.num}}</p>
						<p>
							<span>{{i.up}}</span>
							<span>{{i.type}}</span>
						</p>
					</div>
				</el-col>
				<el-col :span="20" class="order-chart">
					<el-row class="canlendar">
						<el-date-picker
						      v-model="value2"
						      type="daterange"
						      align="right"
						      unlink-panels
						      range-separator="至"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期"
						      :picker-options="pickerOptions">
						    </el-date-picker>
					</el-row>
					<el-row>
						<ve-line :data="chartData" :settings="chartSettings"></ve-line>
					</el-row>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				value2:'',
				 pickerOptions: {
				          shortcuts: [{
				            text: '最近一周',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date();
				              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				              picker.$emit('pick', [start, end]);
				            }
				          }, {
				            text: '最近一个月',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date();
				              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				              picker.$emit('pick', [start, end]);
				            }
				          }]
				        },
				
				chartSettings:{
					area:true,
					xAxisType: 'time',
					axisSite: {
					        right: ['orderAmount'],
							left:['orderCount']
					      }
				},
				datetime: '',
				TongjiArr: [{
						"name": "本月订单统计",
						"num": 10000,
						"up": "+10",
						"type": "同比上月"
					},
					{
						"name": "本周订单总数",
						"num": 1000,
						"up": "-10",
						"type": "同比上周"
					},
					{
						"name": "本月销售总额",
						"num": 100000,
						"up": "+10",
						"type": "同比上月"
					},
					{
						"name": "本周销售总额",
						"num": 50000,
						"up": "-10",
						"type": "同比上周"
					},
				],
				showData:{},
				// //表数据
				chartData: {
					columns: ['date', 'orderCount', 'orderAmount'],
					rows: [{
							date: '2018-11-01',
							orderCount: 10,
							orderAmount: 1093
						},
						{
							date: '2018-11-02',
							orderCount: 20,
							orderAmount: 2230
						},
						{
							date: '2018-11-03',
							orderCount: 33,
							orderAmount: 3623
						},
						{
							date: '2018-11-04',
							orderCount: 50,
							orderAmount: 6423
						},
						{
							date: '2018-11-05',
							orderCount: 100,
							orderAmount: 8492
						},
						{
							date: '2018-11-06',
							orderCount: 80,
							orderAmount: 6293
						},
						{
							date: '2018-11-07',
							orderCount: 20,
							orderAmount: 2293
						},
						{
							date: '2018-11-08',
							orderCount: 60,
							orderAmount: 6293
						},
						{
							date: '2018-11-09',
							orderCount: 50,
							orderAmount: 5293
						},
						{
							date: '2018-11-10',
							orderCount: 40,
							orderAmount: 3293
						},
						{
							date: '2018-11-11',
							orderCount: 200,
							orderAmount: 2293
						},
						{
							date: '2018-11-12',
							orderCount: 80,
							orderAmount: 8293
						}
					]
				},
			}
		},
		mounted(){
			//往仓库里面放点儿数据
			this.$store.state.username = "大于随风";
			//保留原始数据
			this.showData = JSON.parse(JSON.stringify(this.chartData));
		},
		watch: {
			//监听values2
			value2(a,b){
				//对charData进行过滤，只显示符合value2时间要求的数据，剩下的过滤掉
				//过滤出符合在a里面的两个值范围内的数据进行显示
				if(a){
					console.log("---->",this.showData.rows)
					this.chartData.rows = this.showData.rows.filter(item=>{
						let aa = new Date(item.date) > a[0] && new Date(item.date) < a[1];
						return aa;
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped="scoped">
	.main-box {
		border: 1px solid red;
		padding: 40px 120px;
		height: 1000px;

		.order-card {
			.bg-purple {
				border: 1px solid #ccc;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 60px;
					height: 60px;
					margin-right: 10px;
				}
			}
		}

		.pending-box {
			border: 1px solid #ccc;
			margin-top: 20px;

			h3 {
				margin: 0;
				padding: 0;
				padding-left: 20px;
				background-color: #F2F6FC;
				height: 50px;
				line-height: 50px;
			}

			.pending-item {
				margin: 20px;

				.el-col {}

				.item {
					border-bottom: 1px solid #ccc;
					display: flex;
					justify-content: space-between;
					line-height: 40px;
					padding: 0 10px;
				}
			}

			//订单图表展示
			.order-desc {
				// background-color: orangered;
				border-right: 1px solid #ccc;
			}

			.order-chart {
				// background-color: blueviolet;
				height: 416px;

				.canlendar {
					// border:1px solid red;
					text-align: right;
					padding: 10px 20px;
				}
			}
		}

		.order-pd {
			margin: 0 !important;
		}
	}
</style>
